@@include('header.htm', {
  "title": "Breadcrumb - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "components",
	"sub_parent": "components",
	"active": "breadcrumb"
})

@@include('top-bar.htm')




<div class="breadcrumb-wrapper">
	<h1>Breadcrumb</h1>

			@@include('breadcrumb.htm', {
			"parent": "components",
			"sub_parent": "components",
			"active": "breadcrumb"
		})
</div>

<div class="row">
	<div class="col-12 col-xl-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Breadcrumbs</h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Breadcrumb Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/breadcrumb/"
						target="_blank">more details.</a></p>
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb">
						<li class="breadcrumb-item active" aria-current="page">Home</li>
					</ol>
				</nav>

				<nav aria-label="breadcrumb">
					<ol class="breadcrumb">
						<li class="breadcrumb-item">
							<a href="#">Home</a>
						</li>
						<li class="breadcrumb-item active" aria-current="page">Components</li>
					</ol>
				</nav>

				<nav aria-label="breadcrumb">
					<ol class="breadcrumb">
						<li class="breadcrumb-item">
							<a href="#">Home</a>
						</li>
						<li class="breadcrumb-item">
							<a href="#">Components</a>
						</li>
						<li class="breadcrumb-item active" aria-current="page">Bredcrumbs</li>
					</ol>
				</nav>
			</div>
		</div>
	</div>

	<div class="col-12 col-xl-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Inverse Breadcrumbs</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> For Breadcrumb inverse add class <code> .breadcrumb-inverse </code>  to <code> &lt;ol class="breadcrumb"&gt; </code>  </p>
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb breadcrumb-inverse">
						<li class="breadcrumb-item active" aria-current="page">Home</li>
					</ol>
				</nav>

				<nav aria-label="breadcrumb">
					<ol class="breadcrumb breadcrumb-inverse">
						<li class="breadcrumb-item">
							<a href="#">Home</a>
						</li>
						<li class="breadcrumb-item active" aria-current="page">Components</li>
					</ol>
				</nav>

				<nav aria-label="breadcrumb">
					<ol class="breadcrumb breadcrumb-inverse">
						<li class="breadcrumb-item">
							<a href="#">Home</a>
						</li>
						<li class="breadcrumb-item">
							<a href="#">Components</a>
						</li>
						<li class="breadcrumb-item active" aria-current="page">Bredcrumbs</li>
					</ol>
				</nav>
			</div>
		</div>
	</div>

	<div class="col-12">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Color Breadcrumbs</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> Background color in breadcrumb for exaple add class <code> .breadcrumb-* </code> to <code> &lt;ol class="breadcrumb"&gt; </code>
				</p>

				<nav aria-label="breadcrumb">
					<ol class="breadcrumb breadcrumb-primary">
						<li class="breadcrumb-item">
							<a href="#">Home</a>
						</li>
						<li class="breadcrumb-item active" aria-current="page">Components Bredcrumbs Primary</li>
					</ol>
				</nav>

				<nav aria-label="breadcrumb">
					<ol class="breadcrumb breadcrumb-pink">
						<li class="breadcrumb-item">
							<a href="#">Home</a>
						</li>
						<li class="breadcrumb-item">
							<a href="#">Components</a>
						</li>
						<li class="breadcrumb-item active" aria-current="page">Bredcrumbs Pink</li>
					</ol>
				</nav>

				<nav aria-label="breadcrumb">
					<ol class="breadcrumb breadcrumb-success">
						<li class="breadcrumb-item">
							<a href="#">Home</a>
						</li>
						<li class="breadcrumb-item">
							<a href="#">Components</a>
						</li>
						<li class="breadcrumb-item active" aria-current="page">Bredcrumbs Success</li>
					</ol>
				</nav>

				<nav aria-label="breadcrumb">
					<ol class="breadcrumb breadcrumb-danger">
						<li class="breadcrumb-item">
							<a href="#">Home</a>
						</li>
						<li class="breadcrumb-item">
							<a href="#">Components</a>
						</li>
						<li class="breadcrumb-item active" aria-current="page">Bredcrumbs Danger</li>
					</ol>
				</nav>

				<nav aria-label="breadcrumb">
					<ol class="breadcrumb breadcrumb-warning">
						<li class="breadcrumb-item">
							<a href="#">Home</a>
						</li>
						<li class="breadcrumb-item">
							<a href="#">Components</a>
						</li>
						<li class="breadcrumb-item active" aria-current="page">Bredcrumbs Warning</li>
					</ol>
				</nav>

				<nav aria-label="breadcrumb">
					<ol class="breadcrumb breadcrumb-info">
						<li class="breadcrumb-item">
							<a href="#">Home</a>
						</li>
						<li class="breadcrumb-item">
							<a href="#">Components</a>
						</li>
						<li class="breadcrumb-item active" aria-current="page">Bredcrumbs Info</li>
					</ol>
				</nav>
			</div>
		</div>
	</div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
